fix: integrate global error boundary and configure sentry - #1831
fix: integrate global error boundary and configure sentry#1831TanCodeX wants to merge 10 commits into
Conversation
|
@TanCodeX is attempting to deploy a commit to the durdana3105's projects Team on Vercel. A member of the Team first needs to authorize it. |
📝 WalkthroughWalkthroughThe change adds Sentry initialization and route error reporting, replaces the Supabase type placeholder with a generated-style schema, tightens selected component types, adjusts activity and authentication handling, and removes or narrows ESLint suppressions. ChangesRuntime observability
Supabase typing and typed consumers
Application data and lifecycle updates
Lint directive cleanup
Estimated code review effort: 4 (Complex) | ~45 minutes Sequence Diagram(s)sequenceDiagram
participant AppContent
participant ErrorBoundary
participant Sentry
AppContent->>ErrorBoundary: render route tree
ErrorBoundary->>ErrorBoundary: catch rendering error
ErrorBoundary->>Sentry: capture exception and component stack
Possibly related PRs
Suggested reviewers: 🚥 Pre-merge checks | ✅ 3 | ❌ 2❌ Failed checks (2 warnings)
✅ Passed checks (3 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
|
RESOLVE MERGE CONFLICTS |
@durdana3105 Done |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
🧹 Nitpick comments (2)
src/main.tsx (1)
2-15: 🚀 Performance & Scalability | 🔵 TrivialMake telemetry sampling environment-dependent before production.
tracesSampleRate: 1.0andreplaysOnErrorSampleRate: 1.0can generate substantial production traffic and Sentry usage. Use environment-specific rates, keeping high sampling for development/staging and bounded sampling for production; also verify replay collection against the project’s privacy and consent requirements. Sentry recommends adjusting trace sampling in production. (github.com)🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/main.tsx` around lines 2 - 15, Update the Sentry.init configuration in main.tsx so tracesSampleRate and replaysOnErrorSampleRate use environment-specific values: retain high sampling for development/staging and bounded rates for production. Also verify that replayIntegration and its sampling settings comply with the project’s privacy and consent requirements.src/integrations/supabase/types.ts (1)
618-664: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚖️ Poor tradeoffFile appears hand-maintained rather than generated.
Inline migration notes (e.g. Line 624
duration_minutes – NEW column added by session scheduling migration) indicate this generated-style file is being edited by hand. Hand-edits drift from the live schema and are silently overwritten on the nextsupabase gen types typescriptrun. Prefer regenerating from the database and keeping migration notes in the migration files instead.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/integrations/supabase/types.ts` around lines 618 - 664, Regenerate the Supabase TypeScript definitions from the live database instead of manually editing the sessions schema in the generated types. Remove inline migration commentary such as the duration_minutes note from src/integrations/supabase/types.ts, and preserve the regenerated column types from the database; keep migration rationale in the corresponding migration files.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Room/ChatBox.tsx`:
- Around line 12-13: Remove the remaining explicit any usages: in
src/components/Room/ChatBox.tsx:12-13, replace messages: any[] with the actual
message type; in src/components/Room/InviteMenu.tsx:17-18, call the typed
invite_to_study_room RPC without an any cast; in src/pages/Discover.tsx:1-1,
type peer data, connection rows, state, and Supabase operations; in
src/pages/Leaderboard.tsx:1-1, use generated database types for RPCs, tables,
and mapped rows; and in src/pages/Notifications.tsx:1-1, define the alert row
type and remove the Supabase cast.
In `@src/pages/Dashboard.tsx`:
- Line 1: Replace the remaining explicit any usages with concrete or narrowly
scoped types before removing the no-explicit-any suppressions:
src/pages/Dashboard.tsx lines 1-1, src/hooks/useAwardXP.ts lines 1-1,
src/hooks/useRoomDetails.ts lines 8-16, src/hooks/useRoomPresence.ts lines 6-17
and 34-34, src/lib/http.ts lines 1-1, src/lib/rewardXP.ts lines 1-1,
src/lib/streakSystem.ts lines 1-1, and src/pages/Chat.tsx lines 1-1. Preserve
each module’s existing behavior and use targeted suppression only where a safe
specific type cannot be applied.
In `@temp_types.ts`:
- Around line 9-15: Remove the unused root-level temp_types.ts scratch file; use
src/integrations/supabase/types.ts as the sole Supabase Database type definition
and leave the active type exports unchanged.
In `@temp2_types.ts`:
- Around line 9-15: Remove the root-level temp2_types.ts scratch file entirely;
the canonical Supabase Database type is src/integrations/supabase/types.ts,
which is already used by client.ts.
---
Nitpick comments:
In `@src/integrations/supabase/types.ts`:
- Around line 618-664: Regenerate the Supabase TypeScript definitions from the
live database instead of manually editing the sessions schema in the generated
types. Remove inline migration commentary such as the duration_minutes note from
src/integrations/supabase/types.ts, and preserve the regenerated column types
from the database; keep migration rationale in the corresponding migration
files.
In `@src/main.tsx`:
- Around line 2-15: Update the Sentry.init configuration in main.tsx so
tracesSampleRate and replaysOnErrorSampleRate use environment-specific values:
retain high sampling for development/staging and bounded rates for production.
Also verify that replayIntegration and its sampling settings comply with the
project’s privacy and consent requirements.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: bcd58445-b15b-4bf2-9860-3fe23dff78a7
⛔ Files ignored due to path filters (5)
package-lock.jsonis excluded by!**/package-lock.jsonuploads/profiles/profile-user-948-test-1784562399339-80652895.pngis excluded by!**/*.pnguploads/profiles/profile-user-948-test-1784562399345-949418920.pngis excluded by!**/*.pnguploads/profiles/profile-user-948-test-1784563190224-561008045.pngis excluded by!**/*.pnguploads/profiles/profile-user-948-test-1784563190229-851416550.pngis excluded by!**/*.png
📒 Files selected for processing (40)
package.jsonsrc/App.tsxsrc/components/AvatarUpload.tsxsrc/components/ErrorBoundary.tsxsrc/components/FloatingAI.tsxsrc/components/NotificationsDropdown.tsxsrc/components/Room/ChatBox.tsxsrc/components/Room/InviteMenu.tsxsrc/components/Sparkles.tsxsrc/components/StudyRooms.tsxsrc/components/Whiteboard/Canvas.tsxsrc/components/dashboard/RecentActivity.tsxsrc/components/landing/Testimonials.tsxsrc/components/markdown/MarkdownRenderer.tsxsrc/components/mentor/MentorForm.tsxsrc/components/theme-provider.tsxsrc/components/ui/sonner.tsxsrc/components/ui/textarea.tsxsrc/features/notifications/pushNotifications.tssrc/features/notifications/useNotifications.tssrc/hooks/useAwardXP.tssrc/hooks/useRoomChat.tssrc/hooks/useRoomDetails.tssrc/hooks/useRoomPresence.tssrc/integrations/supabase/types.tssrc/lib/http.tssrc/lib/rewardXP.tssrc/lib/streakSystem.tssrc/main.tsxsrc/pages/Chat.tsxsrc/pages/Contact.test.tsxsrc/pages/Dashboard.tsxsrc/pages/Discover.tsxsrc/pages/Leaderboard.tsxsrc/pages/MentorDashboard.tsxsrc/pages/Notifications.tsxsrc/pages/aipage.tsxtailwind.config.tstemp2_types.tstemp_types.ts
💤 Files with no reviewable changes (1)
- src/components/AvatarUpload.tsx
| messages: any[]; |
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | ⚡ Quick win
Remove the explicit any usages before removing their suppressions.
These files still contain explicit any after their no-explicit-any suppressions were removed:
src/components/Room/ChatBox.tsx#L12-L13: replacemessages: any[]with the actual message type.src/components/Room/InviteMenu.tsx#L17-L18: call the typedinvite_to_study_roomRPC withoutas any.src/pages/Discover.tsx#L1-L1: type peer data, connection rows, state, and Supabase operations.src/pages/Leaderboard.tsx#L1-L1: use generated database types for RPCs, tables, and mapped rows.src/pages/Notifications.tsx#L1-L1: define the alert row type and remove the Supabase cast.
📍 Affects 5 files
src/components/Room/ChatBox.tsx#L12-L13(this comment)src/components/Room/InviteMenu.tsx#L17-L18src/pages/Discover.tsx#L1-L1src/pages/Leaderboard.tsx#L1-L1src/pages/Notifications.tsx#L1-L1
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Room/ChatBox.tsx` around lines 12 - 13, Remove the remaining
explicit any usages: in src/components/Room/ChatBox.tsx:12-13, replace messages:
any[] with the actual message type; in src/components/Room/InviteMenu.tsx:17-18,
call the typed invite_to_study_room RPC without an any cast; in
src/pages/Discover.tsx:1-1, type peer data, connection rows, state, and Supabase
operations; in src/pages/Leaderboard.tsx:1-1, use generated database types for
RPCs, tables, and mapped rows; and in src/pages/Notifications.tsx:1-1, define
the alert row type and remove the Supabase cast.
| @@ -1,4 +1,4 @@ | |||
| /* eslint-disable @typescript-eslint/no-explicit-any */ | |||
There was a problem hiding this comment.
📐 Maintainability & Code Quality | 🟠 Major | 🏗️ Heavy lift
🧩 Analysis chain
🏁 Script executed:
#!/bin/bash
rg -n --glob '*.ts' --glob '*.tsx' '\bany\b' src/hooks/useAwardXP.ts src/hooks/useRoomDetails.ts src/hooks/useRoomPresence.ts src/lib/http.ts src/lib/rewardXP.ts src/lib/streakSystem.ts src/pages/Chat.tsx src/pages/Dashboard.tsxRepository: durdana3105/peer-learning
Length of output: 2208
Replace the remaining any usages before removing these suppressions.
These sites still rely on explicit any, so @typescript-eslint/no-explicit-any will keep failing until they’re typed or narrowly suppressed again:
src/hooks/useAwardXP.tssrc/hooks/useRoomDetails.tssrc/hooks/useRoomPresence.tssrc/lib/http.tssrc/lib/rewardXP.tssrc/lib/streakSystem.tssrc/pages/Chat.tsxsrc/pages/Dashboard.tsx
📍 Affects 8 files
src/pages/Dashboard.tsx#L1-L1(this comment)src/hooks/useAwardXP.ts#L1-L1src/hooks/useRoomDetails.ts#L8-L16src/hooks/useRoomPresence.ts#L6-L17src/hooks/useRoomPresence.ts#L34-L34src/lib/http.ts#L1-L1src/lib/rewardXP.ts#L1-L1src/lib/streakSystem.ts#L1-L1src/pages/Chat.tsx#L1-L1
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/pages/Dashboard.tsx` at line 1, Replace the remaining explicit any usages
with concrete or narrowly scoped types before removing the no-explicit-any
suppressions: src/pages/Dashboard.tsx lines 1-1, src/hooks/useAwardXP.ts lines
1-1, src/hooks/useRoomDetails.ts lines 8-16, src/hooks/useRoomPresence.ts lines
6-17 and 34-34, src/lib/http.ts lines 1-1, src/lib/rewardXP.ts lines 1-1,
src/lib/streakSystem.ts lines 1-1, and src/pages/Chat.tsx lines 1-1. Preserve
each module’s existing behavior and use targeted suppression only where a safe
specific type cannot be applied.
|
please resolve coderabbit comments |
…com/TanCodeX/peer-learning into fix/integrate-global-error-boundary
There was a problem hiding this comment.
Actionable comments posted: 1
🧹 Nitpick comments (1)
src/hooks/useSkillEndorsements.test.ts (1)
12-14: 📐 Maintainability & Code Quality | 🔵 Trivial | ⚡ Quick winCover the new auth subscription behavior.
The mock now provides the correct subscription shape, but the test never verifies auth-event updates or that
unsubscribe()runs on unmount. Capture the callback/subscription and add assertions for both behaviors, including the initial-load ordering case.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/hooks/useSkillEndorsements.test.ts` around lines 12 - 14, Update the auth mock in the useSkillEndorsements tests to capture the onAuthStateChange callback and returned subscription, then assert auth events trigger the expected endorsement updates and unsubscribe is called on unmount. Also cover the initial-load ordering case, verifying behavior when the auth event occurs before the initial data load completes.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/components/Room/ChatBox.tsx`:
- Around line 12-17: Update the messages prop type in ChatBoxProps to declare
profile_id as string | null, matching the generated study_room_messages row and
allowing anonymous messages. Preserve the existing id, content, and profiles
field definitions.
---
Nitpick comments:
In `@src/hooks/useSkillEndorsements.test.ts`:
- Around line 12-14: Update the auth mock in the useSkillEndorsements tests to
capture the onAuthStateChange callback and returned subscription, then assert
auth events trigger the expected endorsement updates and unsubscribe is called
on unmount. Also cover the initial-load ordering case, verifying behavior when
the auth event occurs before the initial data load completes.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 4697d25d-d789-4aa6-876c-f20532ed8016
📒 Files selected for processing (9)
src/components/Room/ChatBox.tsxsrc/components/Room/InviteMenu.tsxsrc/components/mentor/MentorForm.tsxsrc/hooks/useSkillEndorsements.test.tssrc/hooks/useSkillEndorsements.tssrc/integrations/supabase/types.tssrc/main.tsxsrc/pages/Discover.tsxsrc/pages/Notifications.tsx
💤 Files with no reviewable changes (2)
- src/components/mentor/MentorForm.tsx
- src/integrations/supabase/types.ts
🚧 Files skipped from review as they are similar to previous changes (1)
- src/main.tsx
| messages: { | ||
| id: string; | ||
| profile_id: string; | ||
| content: string; | ||
| profiles?: { name: string | null } | null; | ||
| }[]; |
There was a problem hiding this comment.
🗄️ Data Integrity & Integration | 🟠 Major | ⚡ Quick win
Keep profile_id nullable.
The generated study_room_messages row defines profile_id as string | null, but this prop requires string. Typed Supabase rows with anonymous messages will not satisfy ChatBoxProps.
Proposed fix
messages: {
id: string;
- profile_id: string;
+ profile_id: string | null;
content: string;📝 Committable suggestion
‼️ IMPORTANT
Carefully review the code before committing. Ensure that it accurately replaces the highlighted code, contains no missing lines, and has no issues with indentation. Thoroughly test & benchmark the code to ensure it meets the requirements.
| messages: { | |
| id: string; | |
| profile_id: string; | |
| content: string; | |
| profiles?: { name: string | null } | null; | |
| }[]; | |
| messages: { | |
| id: string; | |
| profile_id: string | null; | |
| content: string; | |
| profiles?: { name: string | null } | null; | |
| }[]; |
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@src/components/Room/ChatBox.tsx` around lines 12 - 17, Update the messages
prop type in ChatBoxProps to declare profile_id as string | null, matching the
generated study_room_messages row and allowing anonymous messages. Preserve the
existing id, content, and profiles field definitions.
@durdana3105 DONE |
|
Please resolve merge conflicts |
@durdana3105 Done |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (2)
src/App.tsx (2)
108-109: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick winRetain a
Suspensefallback for the lazy routes.All route elements inside
<Routes>are lazy imports, but theErrorBoundarywrapper does not provide theSuspensefallback required while those routes load. KeepErrorBoundaryon the outside and wrap<Routes>with<Suspense fallback={<SplashScreen />}>before navigating to or changing lazy routes.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/App.tsx` around lines 108 - 109, Keep ErrorBoundary as the outer wrapper and add a Suspense boundary around the Routes component, using fallback={<SplashScreen />}, so all lazy route imports render the loading screen while resolving.
48-50: 🎯 Functional Correctness | 🔴 Critical | ⚡ Quick winRemove the duplicate
Settingsdeclaration.
src/App.tsxdeclaresSettingstwice, which prevents the TypeScript/JavaScript module from compiling. Keep only one declaration.Proposed fix
const Settings = React.lazy(() => import("./pages/Settings")); const Notifications = React.lazy(() => import("./pages/Notifications")); -const Settings = React.lazy(() => import("./pages/Settings"));🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/App.tsx` around lines 48 - 50, Remove the duplicate Settings declaration in App.tsx, keeping a single React.lazy import for ./pages/Settings while preserving the Notifications declaration.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/App.tsx`:
- Around line 108-109: Keep ErrorBoundary as the outer wrapper and add a
Suspense boundary around the Routes component, using fallback={<SplashScreen
/>}, so all lazy route imports render the loading screen while resolving.
- Around line 48-50: Remove the duplicate Settings declaration in App.tsx,
keeping a single React.lazy import for ./pages/Settings while preserving the
Notifications declaration.
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 65884fab-151b-47a5-87f4-37bb559a3443
⛔ Files ignored due to path filters (1)
package-lock.jsonis excluded by!**/package-lock.json
📒 Files selected for processing (3)
src/App.tsxsrc/components/Whiteboard/Canvas.tsxsrc/hooks/useAwardXP.ts
🚧 Files skipped from review as they are similar to previous changes (2)
- src/components/Whiteboard/Canvas.tsx
- src/hooks/useAwardXP.ts
2 participants
Description
Closes #1827
This Pull Request addresses the lack of a global fallback UI for unexpected React rendering errors. By wrapping the application's routing tree in an
<ErrorBoundary>, we prevent the entire app from crashing when a component fails to render. It also integrates Sentry to automatically capture and log these runtime exceptions for easier debugging.Changes Made
<Routes>insidesrc/App.tsxwith<ErrorBoundary>to ensure that rendering errors within the routing tree do not crash the entire application but instead show a graceful fallback UI.@sentry/reactpackage.src/main.tsxto automatically track errors and monitor session replays (configured to read theVITE_SENTRY_DSNenvironment variable).componentDidCatchlifecycle method insrc/components/ErrorBoundary.tsxto capture exceptions usingSentry.captureException(with the component stack included), replacing the oldTODOcomment.Impact
Verification
npm run test); all tests pass successfully.npm run build).Summary by CodeRabbit